<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <!-- 医生管理页面 -->
      <el-tab-pane label="医生管理" >
        <!-- 医生高级检索 -->
        <el-form :inline="true" :model="doctorForm" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="doctorForm.trueName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doctorSearchBtn">查询</el-button>
          </el-form-item>
          <el-button style="position:absolute;top:6%;right:5%" type="primary" @click="addDoctorBtn">添加医生</el-button>
        </el-form>


        <!-- 医生表格数据渲染 -->
        <el-table  :data="doctorList" border style="width: 100%">
        <el-table-column  prop="id" label="序号" width="120" />
        <el-table-column  prop="dzmHisMemberList[0].uid" label="用户id" width="120" v-if="false" /><!--隐藏这一列-->
      <el-table-column prop="trueName" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="sex"  label="性别" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.sex == 1">男</div>
            <div v-else>女</div>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="120">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="120">
      </el-table-column>
      <el-table-column prop="dzmHisDepartmentList[0].departmentName" label="科室" width="120">
      </el-table-column>
      <el-table-column prop="dzmHisDictionaryList[0].dictionaryName" label="职务" width="120">
      </el-table-column>
      <el-table-column prop="createTime" label="加入时间" width="120">
      </el-table-column>
      <el-table-column prop="dzmHisMemberList[0].status" label="状态" width="120" >
        <!-- {{doctorList.dzmHisMemberList[0].status == 1? '<el-button disabled>禁用</el-button>':'<el-button @click="qiyong">启用</el-button>'}} -->
        <template slot-scope="scope">
            <el-button type="danger" v-if="scope.row.dzmHisMemberList[0].status === 2" disabled>已禁用</el-button>
            <el-button type="primary" v-else disabled>已启用</el-button>
        </template>
      </el-table-column>
        <el-table-column  label="操作" width="200">
        <template slot-scope="scope">
          <el-button v-if="scope.row.dzmHisMemberList[0].status === 1" @click="editDoctorBtn(scope.row)" type="primary" icon="el-icon-edit" size="small">编辑</el-button>
          <el-button v-if="scope.row.dzmHisMemberList[0].status === 1" @click="jinyong(scope.row)" type="danger" icon="el-icon-delete" size="small">禁用</el-button>
          <el-button  type="primary" v-else  @click="qiyong(scope.row)" size="small" >启用</el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="doctorList.length"
      >
      </el-pagination>


    <!-- 点击编辑医生弹出层 -->
    <el-dialog title="编辑医生" :visible.sync="updateFormVisible" :before-close="handleClose">
      <el-form ref="updateDoctorForm" :model="updateDoctorForm" :rules="rules">
        <el-form-item label="姓名:" :label-width="formLabelWidth" prop="trueName" >
          <el-input v-model="updateDoctorForm.trueName" autocomplete="off" style="width:250px"></el-input>
          <el-input v-model="updateDoctorForm.id" autocomplete="off" type="hidden" style="width:1px"></el-input>
          <el-input v-model="updateDoctorForm.dzmHisMemberList[0].uid" autocomplete="off" type="hidden" style="width:1px"></el-input>
        </el-form-item>
        <el-form-item label="性别:" :label-width="formLabelWidth" prop="sex" >
          <el-select v-model="updateDoctorForm.sex"  placeholder="请选择性别" style="width:250px">
            <el-option label="男" key="1" value="1"></el-option>
            <el-option label="女" key="2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号:" :label-width="formLabelWidth" prop="phone" >
          <el-input v-model="updateDoctorForm.phone" autocomplete="off" style="width:250px"></el-input>
        </el-form-item>
        <el-form-item label="密码:" :label-width="formLabelWidth">
          <el-button @click="chongzhimima">重置密码</el-button>
        </el-form-item>
         <el-form-item label="年龄:" :label-width="formLabelWidth" prop="age" >
          <el-input v-model="updateDoctorForm.age" autocomplete="off" style="width:250px"></el-input>
        </el-form-item>
        <el-form-item label="科室:" :label-width="formLabelWidth" prop="departmentId" >
          <el-select v-model="updateDoctorForm.dzmHisMemberList[0].departmentId"  placeholder="请选择科室" style="width:600px">
             <el-option
                v-for="item in this.departments"
                :key="item.did"
                :label="item.departmentName"
                :value="item.did"
              />
          </el-select>
        </el-form-item>
        <el-form-item label="级别:" :label-width="formLabelWidth" prop="rank" >
          <el-select v-model="updateDoctorForm.dzmHisMemberList[0].rank"  placeholder="请选择级别" style="width:600px">
            <el-option
                v-for="item in this.jibie"
                :key="item.did"
                :label="item.dictionaryName"
                :value="item.did"
              />
          </el-select>
        </el-form-item>
        <el-form-item label="职务:" :label-width="formLabelWidth" prop="type" >
          <el-radio-group v-model="updateDoctorForm.dzmHisMemberList[0].type">
            <el-radio  v-for="item in  this.zhiwu" :key="item.did" :label="item.did" :value="item.did"
            >{{item.dictionaryName}}</el-radio>
          </el-radio-group>
          <!-- <el-select v-model="updateDoctorForm.dzmHisMemberList[0].type"  placeholder="请选择职务" style="width:600px">
            <el-option
                v-for="item in this.zhiwu"
                :key="item.did"
                :label="item.dictionaryName"
                :value="item.did"
              />
          </el-select> -->
        </el-form-item>
         <el-form-item label="医生擅长:" :label-width="formLabelWidth" prop="strong" >
          <textarea  v-model="updateDoctorForm.strong" cols="30" rows="3"  style="width:600px"></textarea>
        </el-form-item>
         <el-form-item label="医生介绍:" :label-width="formLabelWidth" prop="introduction">
          <textarea  v-model="updateDoctorForm.introduction" cols="30" rows="3"  style="width:600px"></textarea>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doctorFormBtn">确 定</el-button>
      </div>
    </el-dialog>



    <!-- 点击添加医生弹出层 -->
    <el-dialog title="添加医生" :visible.sync="addFormVisible" :before-close="handleClose">
      <el-form ref="addDoctorForm" :model="addDoctorForm" :rules="rules">
        <el-form-item label="姓名:" :label-width="formLabelWidth" prop="trueName">
          <el-input v-model="addDoctorForm.trueName" autocomplete="off" style="width:250px"></el-input>
        </el-form-item>
        <el-form-item label="账号:" :label-width="formLabelWidth" prop="userName">
          <el-input v-model="addDoctorForm.dzmHisMemberList[0].userName" autocomplete="off" style="width:250px"></el-input>
        </el-form-item>
        <el-form-item label="性别:" :label-width="formLabelWidth" prop="sex">
          <el-select v-model="addDoctorForm.sex"  placeholder="请选择性别" style="width:250px">
            <el-option label="男" key="1" value="1"></el-option>
            <el-option label="女" key="2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号:" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="addDoctorForm.phone" autocomplete="off" style="width:250px"></el-input>
        </el-form-item>
         <el-form-item label="年龄:" :label-width="formLabelWidth" prop="age">
          <el-input v-model="addDoctorForm.age" autocomplete="off" style="width:250px"></el-input>
        </el-form-item>
        <el-form-item label="科室:" :label-width="formLabelWidth" prop="departmentId">
          <el-select v-model="addDoctorForm.dzmHisMemberList[0].departmentId"  placeholder="请选择科室" style="width:600px">
             <el-option
                v-for="item in this.departments"
                :key="item.did"
                :label="item.departmentName"
                :value="item.did"
              />
          </el-select>
        </el-form-item>
        <el-form-item label="级别:" :label-width="formLabelWidth" prop="rank">
          <el-select v-model="addDoctorForm.dzmHisMemberList[0].rank"  placeholder="请选择级别" style="width:600px">
            <el-option
                v-for="item in this.jibie"
                :key="item.did"
                :label="item.dictionaryName"
                :value="item.did"
              />
          </el-select>
        </el-form-item>
        <el-form-item label="职务:" :label-width="formLabelWidth" prop="type">
          <el-radio-group v-model="addDoctorForm.dzmHisMemberList[0].type">
            <el-radio  v-for="item in  this.zhiwu" :key="item.did" :label="item.did" :value="item.did"
            >{{item.dictionaryName}}</el-radio>
          </el-radio-group>
          <!-- <el-select v-model="addDoctorForm.dzmHisMemberList[0].type"  placeholder="请选择职务" style="width:600px">
            <el-option
                v-for="item in this.zhiwu"
                :key="item.did"
                :label="item.dictionaryName"
                :value="item.did"
              />
          </el-select> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDoctorFormBtn">确 定</el-button>
      </div>
    </el-dialog>






      </el-tab-pane>
      <!-- 职务管理页面 -->
      <el-tab-pane label="职务管理">
          <h1>功能正在开发中</h1>
      </el-tab-pane>
  </el-tabs>

  </div>
</template>

<script>
import { getDoctor, selectDoctorId, updateDoctor, updatePwd, jinyong, qiyong, addDoctor } from "@/api/dzmHisDoctor/list";//医生api
import { jiBieList, zhiWuList } from "@/api/dzmhisdictionary/list";//字典api
import { getList } from "@/api/department/departmentfile";//科室查询

export default {
  data() {
    return {
      // 当前数据页的第几页
      currentPage: 1,
      // 总数据条数
      total: 0,
      // 每页显示多少行数据,默认为10条
      pagesize: 10,
      // 分页后的当前页数据
      doctorList: [{
        id:null,
        trueName:null,
        sex:null,
        phone:null,
        age:null,
        dzmHisDepartment:[{departmentName:null}],
        dzmHisDictionaryList:[{dictionaryName:null}],
        dzmHisMemberList:[{uid:null}],
        createTime:null,
        status:null
      }],
      // 代表是从后端获取的所有数据
      ticket: [],
      //医生高级检索数据
      doctorForm:{},
      //编辑医生
      updateDoctorForm:{
        id:null,
        trueName:null,
        sex:null,
        phone:null,
        age:null,
        dzmHisMemberList:[{uid:null,departmentId:null,rank:null,type:null}],
        strong:null,
        introduction:null
      },
      //添加医生
      addDoctorForm:{
        trueName:null,
        sex:null,
        phone:null,
        age:null,
        dzmHisMemberList:[{departmentId:null,rank:null,type:null}],
      },
      //是否显示编辑医生
      updateFormVisible: false,
      //是否显示添加医生
      addFormVisible:false,
      //编辑医生对话框的宽度
      formLabelWidth: '120px',
      //用来装字典职务的数组
      zhiwu:[],
      //级别字典数组
      jibie:[],
      //科室数组
      departments:[],

      //正则验证
      rules:{
        trueName:[
          {required: true, message: "请入医生名称", trigger: "blur"},
          // {min: 2, max:6, message: "医生姓名应该为2-6个汉字", trigger: "blur"},
          {
                        required: true,
                        pattern: /^[\u4e00-\u9fa5]{2,6}$/,
                        message: '请输入2~6位中文姓名',
                        trigger: 'blur'
               }
        ],
        sex:[
          {required: true, message: "请选择医生性别", trigger: "blur"},
          {min: 1, max:1, message: "性别不能为空", trigger: "blur"}
        ],
        phone:[
          {required: true, message: "请输入医生手机号", trigger: "blur"},
          {
                        required: true,
                        pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
               }
        ],
        age:[
          {required: true, message: "请入医生年龄", trigger: "blur"},
          {min: 1, max:2, message: "年龄不可超过99岁", trigger: "blur"}
        ],
        strong:[
          {required: true, message: "请输入医生擅长称", trigger: "blur"}
        ],
        introduction:[
          {required: true, message: "请输入医生介绍", trigger: "blur"}
        ],
      }
    }
  },
  created() {
    this.getDoctor()
    this.getDict()
  },
  methods: {
    getDoctor() {
      getDoctor(this.doctorForm).then((response) => {
        // alert(response.data.dzmHisMemberList[0].status)

        // 获取数据并赋值
        this.ticket = response.data
        // 获取返回数据的总行数
        this.total = response.data.length
        // 获取当前页面的数据,此方法在下方定义
        this.getDoctorInfo()
      })
    },
    //动态渲染列表
    getDict(){
      jiBieList().then((response) =>{
        this.jibie = response.data
      })
       zhiWuList().then((response) =>{
        this.zhiwu = response.data
      })
      getList().then((response) =>{
        this.departments = response.data
      })
    },
    // 此方法用来获取当前页的数据
    getDoctorInfo() {
      // 清空表格的list数据
      this.doctorList = []
      // 获取当前页的数据
      for (
        let i = (this.currentPage - 1) * this.pagesize;
        i < this.total;
        i++
      ) {
        // 将遍历的数据添加到list里面
        this.doctorList.push(this.ticket[i])
        // 判断是否达到每一页的要求
        if (this.doctorList.length === this.pagesize) {
          break
        }
      }
      console.log(this.doctorList[0].sex)
    },
    // 分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size) {
      // 修改当前每页的数据行数
      this.pagesize = size
      // 数据重新分页
      this.getDoctorInfo
    },
    // 调整当前的页码
    handleCurrentChange(pageNumber) {
      // 修改当前的页码
      this.currentPage = pageNumber // 数据重新分页
      this.getDoctorInfo()
    },
    //医生高级检索按钮
    doctorSearchBtn(){
      //    getDoctor(this.doctorForm).then(response => {
      //     this.doctorList = response.rows;
      //   }
      // );
      this.getDoctor()
    },
    //点击编辑触发医生个人信息查询请求
    editDoctorBtn(row){
      const id = row.id | this.id
        selectDoctorId(id).then(response => {
          this.updateDoctorForm = response.data
          this.updateDoctorForm.sex = (response.data.sex == 1 ? '男':"女")
        }
      )
      //对话框弹出
        this.updateFormVisible = true;
    },
    //禁用医生登录
    jinyong(row){
      const uid = row.dzmHisMemberList[0].uid
      jinyong(uid).then(response => {
          if (response.code === 200) {
              this.$message({
                message: "禁用成功",
                type: "success",
              });
              this.open = false;
              this.getDoctor();
            } else {
              //失败提示
              this.$message({
                message: "禁用失败",
                type: "error",
              });
            }
        }
      )
    },
    //启用医生登录
    qiyong(row){
      const uid = row.dzmHisMemberList[0].uid
      qiyong(uid).then(response => {
          if (response.code === 200) {
              this.$message({
                message: "启用成功",
                type: "success",
              });
              this.open = false;
              this.getDoctor();
            } else {
              //失败提示
              this.$message({
                message: "启用失败",
                type: "error",
              });
            }
        }
      )
    },
    //是否关闭修改弹出层提示
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //点击确认修改按钮
      doctorFormBtn(){
        this.$refs["updateDoctorForm"].validate((valid) => {
        if (valid) {
          updateDoctor(this.updateDoctorForm).then((response) => {
            if (response.code === 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.updateFormVisible = false;
              this.getDoctor();
            } else {
              //失败提示
              this.$message({
                message: "修改失败",
                type: "error",
              });
            }
          });
        }
       });
      },
      //添加医生按钮
      addDoctorFormBtn(){
        this.$refs["addDoctorForm"].validate((valid) => {
        if (valid) {
          console.log(this.addDoctorForm)
          addDoctor(this.addDoctorForm).then((response) => {
            if (response.code === 200) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.addFormVisible = false;
              this.getDoctor();
            } else {
              //失败提示
              this.$message({
                message: "添加失败",
                type: "error",
              });
            }
          });
        }
       });
      },
      //重置医生密码
      chongzhimima(){
        updatePwd(this.updateDoctorForm.uid).then((response) =>{
        this.departments = response.data
        if (response.code === 200) {
              this.$message({
                message: "重置密码成功",
                type: "success",
              });
              this.open = false;
              this.getList();
            } else {
              //失败提示
              this.$message({
                message: "重置密码失败",
                type: "error",
              });
            }
      })
      },
      //添加医生弹出框
      addDoctorBtn(){
          this.addFormVisible = true;
      }

  }
}
</script>
<style>
/* table文字居中 */
.el-table td,.el-table th {
  text-align: center !important;
}

</style>
